<template>
  <div class="dashboard">
    <h2 class="page-title">数据概览</h2>
    
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card" v-for="stat in stats" :key="stat.title">
        <div class="stat-icon" :style="{ backgroundColor: stat.color }">
          <el-icon :size="32"><component :is="stat.icon" /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-title">{{ stat.title }}</div>
          <div class="stat-value">{{ stat.value }}</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-row">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>用户注册趋势</span>
          </div>
        </template>
        <div class="chart-placeholder">
          <el-icon :size="48" color="#ccc"><TrendCharts /></el-icon>
          <p>图表数据</p>
        </div>
      </el-card>

      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>训练活跃度</span>
          </div>
        </template>
        <div class="chart-placeholder">
          <el-icon :size="48" color="#ccc"><DataLine /></el-icon>
          <p>图表数据</p>
        </div>
      </el-card>
    </div>

    <!-- 最近操作日志 -->
    <el-card class="logs-card">
      <template #header>
        <div class="card-header">
          <span>最近操作</span>
          <el-button type="primary" link @click="goToLogs">查看更多</el-button>
        </div>
      </template>
      
      <el-table :data="recentLogs" style="width: 100%">
        <el-table-column prop="username" label="操作人" width="120" />
        <el-table-column prop="action" label="操作" width="150" />
        <el-table-column prop="resource" label="资源" width="150" />
        <el-table-column prop="ip" label="IP地址" width="150" />
        <el-table-column prop="created_at" label="操作时间" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small">
              {{ row.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getStatisticsOverview } from '@/api/business'
import { getOperationLogs } from '@/api/logs'

const router = useRouter()

const stats = ref([
  {
    title: '总用户数',
    value: 0,
    icon: 'User',
    color: '#409eff'
  },
  {
    title: '今日新增',
    value: 0,
    icon: 'Plus',
    color: '#67c23a'
  },
  {
    title: '训练记录',
    value: 0,
    icon: 'TrendCharts',
    color: '#e6a23c'
  },
  {
    title: '实名认证',
    value: 0,
    icon: 'Postcard',
    color: '#f56c6c'
  }
])

const recentLogs = ref([])

const fetchData = async () => {
  try {
    // 获取统计数据
    const res = await getStatisticsOverview()
    if (res.data) {
      stats.value[0].value = res.data.total_users || 0
      stats.value[1].value = res.data.today_new_users || 0
      stats.value[2].value = res.data.total_training_records || 0
      stats.value[3].value = res.data.verified_users || 0
    }

    // 获取最近操作日志
    const logsRes = await getOperationLogs({ page: 1, page_size: 10 })
    if (logsRes.data && logsRes.data.items) {
      recentLogs.value = logsRes.data.items
    }
  } catch (error) {
    console.error('Fetch dashboard data error:', error)
  }
}

const goToLogs = () => {
  router.push('/logs')
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.dashboard {
  width: 100%;
}

.page-title {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin-bottom: 24px;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #333;
}

/* 图表区域 */
.charts-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.chart-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.chart-placeholder p {
  margin-top: 12px;
  font-size: 14px;
}

/* 日志卡片 */
.logs-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

/* 响应式 */
@media (max-width: 1400px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .charts-row {
    grid-template-columns: 1fr;
  }
}
</style>

